{% extends "::base.html.twig" %}
{% block title %} 
    [[current_song.name]]
{% endblock title %}
{% block javascript %}
<script type="text/javascripte">
    audiojs.events.ready(function() {
        var as = audiojs.createAll();
    });
</script>
{% endblock %}
{% block player %}
<script type="text/javascript" src="{{ asset('bundles/musicfrontend/js/controllers/player.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/musicfrontend/js/controllers/search.js') }}"></script>
<div class="current_playlist" ng-controller="player">
    <br>
    <p class="button postfix disabled" id="change_track" ng-click="nextTrack()">ПЕРЕКЛЮЧИТЬ СРОЧНО НАХУЙ БЛЯТЬ! <span ng-show="current_song.change_track"> - [[current_song.change_track]]</span></p>
    <h2>Сейчас играет</h2> 
    <p>
        [[current_song.name]]<span ng-show="current_song.added_by"><small> Added by - [[current_song.added_by]]</small></span>
        <br>
        <h7 class="subheader">
            <span class="round alert label" id="to_delete" ng-click="voteToRemove(current_song.song_id, $event)">Удалить трек</span>
            <span class="round success label" id="to_like" ng-click="voteLike(current_song.song_id, $event)">Лайк зис щит</span>
            <small ng-show="current_song.ignore_count > 0">за удаление - [[ current_song.ignore_count ]] голос(a)</small>
            <small ng-show="current_song.likes > 0"> || лайков - [[ current_song.likes ]]</small>
        </h7>
    </p>
    
    <h4>Cледующая по списку</h4> 
    <p>
        [[next_song.name]]<span ng-show="next_song.added_by"><small> Added by - [[next_song.added_by]]</small></span>
        <br>
        <h7 class="subheader">
            <span class="round alert label" id="to_delete" ng-click="voteToRemove(next_song.song_id, $event)">Удалить трек</span>
            <span class="round success label" id="to_like" ng-click="voteLike(next_song.song_id, $event)">Лайк зис щит</span>
            <small ng-show="next_song.ignore_count > 0">за удаление - [[ next_song.ignore_count ]] голос(a)</small>
            <small ng-show="next_song.likes > 0"> || лайков - [[ next_song.likes ]]</small>
        </h7>
    </p>
    <h2>Плейлист</h2> 
    <div class="player" ng-show="playlist">
        <ul class="side-nav" id="playlist" ng-show="playlist.length">
            <li ng-repeat="item in playlist" data-id="[[item.song_id]]" class="[[(item.current_played == 1) ? 'playing button' : '']]">
                [[item.name]] <span ng-show="item.added_by"><small> Added by - [[item.added_by]]</small></span>
                <div>
                    <h7 class="subheader">
                        <span class="round alert label" id="to_delete" ng-click="voteToRemove(item.song_id, $event)">Удалить трек</span>
                        <span class="round success label" id="to_like" ng-click="voteLike(item.song_id, $event)">Лайк зис щит</span>
                        <small ng-show="item.ignore_count > 0">за удаление - [[ item.ignore_count ]] голос(a)</small>
                        <small ng-show="item.likes > 0"> || лайков - [[ item.likes ]]</small>
                    </h7>
                </div>
            </li>
        </ul>
    </div>
</div>
{% endblock %}

{% block search %}
<div ng-controller="search">
    <div class="row">
        <div class="large-12 columns">
            <br/>
            <div class="row collapse">
                <div class="small-10 columns">
                    <input type="text" ng-model="search_query" class="[[ (search_error) ? 'error' : '']]" placeholder="Song name">
                    <small class="error" ng-show="search_error">Запрос должен быть более 3 символов</small>
                </div>
                <div class="small-2 columns">
                    <a href="#" onclick="return false" class="[[ (search_query.length >= 3) ? 'button postfix' : 'button postfix disabled']]"ng-click="loadResults([[search_query]])">Go</a>
                </div>
            </div>
        </div>
        <div class="result-content">
            <div class="result_player" ng-show="current_played">
                <audio preload id="pre_play"></audio>
                <a href="#" class="button alert add-to-playlist postfix" ng-click="addSong()">Add</a>
            </div>
            <img id="loader_image" src="{{asset('bundles/musicfrontend/img/loader.gif')}}" ng-show="search_inprogress">
            <ul class="side-nav" id="song-list-result" ng-show="search_results.length">
                <li ng-repeat="song in search_results">
                    <a onclick="return false" ng-click="playSong([[song.id]])">[[song.filename]]</a>
                </li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}